<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>公司平面图</title>  
    <style>  
        body {  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh;  
            margin: 0;  
            background-color: #f0f0f0;  
        }  
  
        .office-floor {  
            width: 800px;  
            height: 600px;  
            border: 1px solid #000;  
            position: relative;  
        }  
  
        .room {  
            position: absolute;  
            border: 1px solid #000;  
        }  
  
        .room-label {  
            position: absolute;  
            text-align: center;  
            font-size: 12px;  
        }  
    </style>  
</head>  
<body>  
    <div class="office-floor">  
        <!-- 办公室1 -->  
        <div class="room" style="top: 50px; left: 50px; width: 200px; height: 150px;"></div>  
        <div class="room-label" style="top: 90px; left: 100px;">办公室1</div>  
  
        <!-- 办公室2 -->  
        <div class="room" style="top: 50px; left: 300px; width: 200px; height: 150px;"></div>  
        <div class="room-label" style="top: 90px; left: 350px;">办公室2</div>  
  
        <!-- 会议室 -->  
        <div class="room" style="top: 250px; left: 150px; width: 150px; height: 100px;"></div>  
        <div class="room-label" style="top: 290px; left: 180px;">会议室</div>  
  
        <!-- 茶水间 -->  
        <div class="room" style="top: 400px; left: 50px; width: 100px; height: 100px;"></div>  
        <div class="room-label" style="top: 440px; left: 80px;">茶水间</div>  
    </div>  
</body>  
</html>